<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>25-document事件类型</title>
    <style>
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
      .item {
        width: 50vw;
        height: 200px;
        background-color: pink;
        font-size: 30px;
        color: white;
        align-items: center;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <input id="textInput"  type="text" />
      <div class="item" index="0">当前移动:</div>
      <div class="item" index="1">当前移动:</div>
      <div class="item" index="2">当前移动:</div>
    </div>
    <script>
      document.querySelectorAll(".item").forEach((dom, index) => {
        let count1 = 0;
        let count2 = 0;
        let count3 = 0;
        // 判断当前dom属于哪个块，通过元素上的自定义属性 "index" 的值来区分
        dom.addEventListener("mouseleave", (event) => {
          // console.log(event.target.innerText)
          if (dom.getAttribute("index") === "0") {
            count1++;
            // 当鼠标在这个元素上移动时，把这个元素（也就是触发事件的目标元素，event.target）内部的文本内容更新为显示当前移动的次数
            event.target.innerText = `当前移动：${count1}`;
            // document.querySelector("div[index='1']").innerText = `当前移动：${count2}`
          } else if (dom.getAttribute("index") === "1") {
            count2++;
            // 当鼠标在这个元素上移动时，把这个元素（也就是触发事件的目标元素，event.target）内部的文本内容更新为显示当前移动的次数
            event.target.innerText = `当前移动：${count2}`;
            event.target.style.color = "blue";
          } else {
            count3++;
            event.target.innerText = `当前移动:${count3}`;
            event.target.style.color = "red";
          }
        });
        
    });
    // document.querySelector("#textInput").addEventListener("input",() => {
    //     alert(123)
    // })
    // document.querySelector("#textInput").addEventListener("keydown",()=>{
    //     alert(123)
    // })

    document.querySelector("#textInput").addEventListener("keyup",(event)=>{
        // 判断回车按键，有两种方式判断，一种是通过event.key，另一种是通过event.keyCode
     if(event.keyCode === 13){
        alert("按下了keyCode===13")
     }
     if(event.key === "Enter"){
        alert('按下了enter')
     }
    })

    </script>
  </body>
</html>
